// import { fromPairs } from "lodash";
import { useState } from "react";
const App = () => {
  const [formData, setFormData] = useState({
    username: "",
    phine: "",
    password: "",
  });
  //设置值
  const setState = ({ target }) => {
    const key = target.name;
    const value = target.value;
    //es6 动态属性 obj.key obj[key]
    setFormData({ ...formData, [key]: value });
  };
  //提交
  const subimt = function () {
    var { username, password, phone } = formData;
    //1.对表单数据进行校验
    //2.我要把手机号从数据里剔除
    var { phone, ...reset } = formData;
    //3.把剩余的数据提交到借口
    console.log(reset);
  };
  const { username, password, phone } = formData;

  return (
    <form>
      <label>
        <span>用户名</span>
        <input
          value={username}
          onChange={setState}
          name="username"
          type="text"
        />
      </label>
      <label>
        <span>手机号</span>
        <input value={phone} onChange={setState} name="phone" type="text" />
      </label>
      <label>
        <span>密码</span>
        <input
          value={password}
          onChange={setState}
          name="password"
          type="password"
        />
      </label>
      <label>
        <button type="button" onClick={subimt}>
          提交
        </button>
        {/* btn按钮在form表单里面点击之后会自动刷新,阻止默认事件,或者在btn按钮上增加一个type的属性,设为button */}
      </label>
    </form>
  );
};
export default App;
